<template>
    <div class="app-container">
        <el-form ref="FormRef" :model="FormData" :rules="rules" size="mini" :inline="true">

            <el-descriptions title="批次信息" :column="4" border>
                <el-descriptions-item label="批次号" label-class-name="my-label">{{ FormData.batchNumber
                    }}</el-descriptions-item>
                <el-descriptions-item label="批次状态" label-class-name="my-label">
                    {{ getStatus }}</el-descriptions-item>
                <el-descriptions-item label="分配时间" label-class-name="my-label">{{ FormData.groupTime ?
                    FormData.groupTime : '-'
                    }}</el-descriptions-item>
                <el-descriptions-item label="创建时间" label-class-name="my-label">{{ FormData.createTime
                    }}</el-descriptions-item>
                <el-descriptions-item label="产品名称" label-class-name="my-label">{{ FormData.productName
                    }}</el-descriptions-item>
                <el-descriptions-item label="叶片类型" label-class-name="my-label">{{ FormData.bladeType
                    }}</el-descriptions-item>
                <el-descriptions-item label="生产小组" label-class-name="my-label">{{ FormData.groupName ?
                    FormData.groupName : '-'
                    }}</el-descriptions-item>
                <el-descriptions-item label="完成时间" label-class-name="my-label">
                    {{ FormData.status == '40' ? FormData.statusTime : '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="生产备注" label-class-name="my-label">
                    <el-input v-model="FormData.remarkProd" placeholder="请输入"> </el-input>
                </el-descriptions-item>
            </el-descriptions>
            <div>
                <div class="title">产品明细</div>
                <!-- 表格 -->
                <el-table v-loading="loading" :data="FormData.productList" :summary-method="getSummaries" show-summary>
                    <el-table-column type="selection" width="70" align="center" />
                    <el-table-column label="客户" prop="orderCustomerName" width="120" />
                    <el-table-column label="序号" prop="serialNumber" width="80" />
                    <el-table-column label="安装宽度" prop="sizeWidthWx" width="100" />
                    <el-table-column label="安装高度" prop="sizeHeightWx" width="100" />
                    <el-table-column label="产品件数" prop="productCount" width="100" />
                    <el-table-column label="成品宽度" prop="sizeWidthSub" width="100" />
                    <el-table-column label="成品高度" prop="sizeHeightSub" width="100" />
                    <el-table-column label="驱动方式" prop="driveMode" width="100" />
                    <el-table-column label="外框颜色" prop="color" width="100" />
                    <el-table-column label="叶片颜色" prop="bladeColor" width="100" />
                    <el-table-column label="备注" prop="remarkProd" width="100" />
                    <el-table-column v-for="(item, index) in FormData.productParamList" :key="index"
                        :label="item.paramName" min-width="100">
                        <template slot-scope="scope">
                            <!-- <div>{{ scope.row[item.fv] }}</div> -->
                            <el-input size="mini" v-model="scope.row[item.fv]" placeholder="请输入"> </el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-form-item size="large" style="margin-top: 20px;">
                <el-button type="primary" @click="handleSubmitAdd">提交</el-button>
                <el-button @click="handleCancelAdd">取消</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import { getInfo, editList } from '@/api/batch'

export default {
    dicts: ['self_batch_status'],
    name: '',
    data() {
        return {
            loading: false,
            FormData: {},
            rules: {},
            orderId: 0

        }
    },
    computed: {
        getStatus() {
            let status = ''
            this.dict.type.self_batch_status.forEach(item => {
                if (item.value == this.FormData.status) {
                    status = item.label
                }
            });
            return status
        }
    },
    created() {
        this.orderId = this.$route.params && this.$route.params.orderId
        if (this.orderId) {
            this.loading = true
            getInfo({
                id: this.orderId
            }).then((result) => {
                this.FormData = result.data
                this.loading = false
            })
        }
    },
    methods: {
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                } else if (index === 5) {
                    const values = data.reduce((prev, curr) => {
                        const value3 = Number(curr.productCount);
                        if (!isNaN(value3)) {
                            return prev + value3;
                        } else {
                            return prev;
                        }
                    }, 0)
                    sums[index] = values + '件'
                } else {
                    sums[index] = '-';
                    return;
                }
            });
            return sums;
        },
        // 添加订单表单取消
        handleCancelAdd() {
            const obj = {
                path: '/batch/list'
            }
            this.$tab.closeOpenPage(obj)
        },
        handleSubmitAdd() {
            let p = { id: 0 }
            this.FormData.productParamList.forEach(item =>
                p[item.fv] = 0
            )
            let data = {}
            data.id = this.FormData.id
            data.remarkProd = this.FormData.remarkProd
            data.productList = []
            this.FormData.productList.forEach(item => {
                let producedata = {}
                Object.keys(p).forEach(key => {
                    producedata[key] = item[key]
                })
                data.productList.push(producedata)
            })
            editList(data).then(res => {
                this.$modal.msgSuccess("修改成功");
                this.loading = true
                getInfo({
                    id: this.orderId
                }).then((result) => {
                    this.FormData = result.data
                    this.loading = false
                })
            })
        }
    },
}
</script>
<style lang='scss' scoped>
.title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin: 10px 0px 20px;
}

.tablex {
    border-collapse: collapse;

    th {
        background-color: #f8f8f9;
        padding: 10px 5px;
        border: 1px solid #eee;
        color: #515a6e;
        font-size: 13px;
    }

    td {
        border: 1px solid #eee;
        text-align: center;
        padding: 5px;
        font-size: 14px;
        color: #606266;
    }
}
</style>